<template>
	<el-form ref="ruleFormRef" :model="formInline" :rules="formRules" label-width="auto" label-position="top"
		v-loading="isLoading">
		<el-row :gutter="30">
			<re-col :value='12' :xs='24' :sm='24'>
				<el-form-item :label='titles?.unityName' prop='unityName'>
					<el-input :maxlength="30" :show-word-limit="true" v-model.trim='formInline.unityName' clearable
						:placeholder='prompt?.unityName' />
				</el-form-item>
			</re-col>

			<re-col :value='12' :xs='24' :sm='24'>
				<el-form-item :label='titles?.contactName' prop='contactName'>
					<el-input :maxlength="30" :show-word-limit="true" v-model.trim='formInline.contactName' clearable
						:placeholder='prompt?.contactName' />
				</el-form-item>
			</re-col>
			<re-col :value='12' :xs='24' :sm='24'>
				<el-form-item :label='titles?.contactPhone' prop='contactPhone'>
					<el-input v-model.trim='formInline.contactPhone' clearable :placeholder='prompt?.contactPhone' />
				</el-form-item>
			</re-col>
			<re-col :value='12' :xs='24' :sm='24'>
				<el-form-item :label='titles?.unityType' prop='unityType'>
					<el-select v-model="formInline.unityType" :placeholder="prompt?.unityType">
						<el-option v-for="item in UNIT_TYPE_LIST" :key="item.value" :label="item.name"
							:value="item.value" />
					</el-select>
				</el-form-item>
			</re-col>
			<re-col :value='12' :xs='24' :sm='24' v-if="formInline.id!=1">
				<el-form-item :label='titles?.parentId' prop='parentId'>
					<unitParentSelect v-model='formInline.parentId' clearable :placeholder='`${prompt?.parentId}(单位结构最多四级)`'
						:style="{ width: '100%' }" @change="formInline.unityRole = []"
						@blur="formValidateField(ruleFormRef, 'parentId')" />
				</el-form-item>
			</re-col>
			<re-col :value='12' :xs='24' :sm='24' v-if="formInline.id!=1">
				<el-form-item :label='titles?.unityRole' prop='unityRole'>
					<unitRoleSelect v-model="formInline.unityRole" :placeholder="prompt?.unityRole" multiple
						:disabled="!formInline?.parentId" :unityId="formInline?.parentId" :style="{ width: '100%' }"
						@blur="formValidateField(ruleFormRef, 'unityRole')" />
				</el-form-item>
			</re-col>
			<re-col :value='12' :xs='24' :sm='24' v-if="superShow">
				<el-form-item :label='titles?.superUser' prop='superUser'>
					<el-input v-model.trim='formInline.superUser' clearable :placeholder='prompt?.superUser'
						:formatter="(value) => value.replace(ACCOUNT_REG.inputFormat, '')"
						:parser="(value) => value.replace(ACCOUNT_REG.inputFormat, '')" />
				</el-form-item>
			</re-col>
			<re-col :value='12' :xs='24' :sm='24' v-if="superShow">
				<el-form-item :label='titles?.superUserPassword' prop='superUserPassword'>
					<el-input v-model.trim='formInline.superUserPassword' clearable type="password" show-password
						:placeholder='prompt?.superUserPassword' />
				</el-form-item>
			</re-col>
			<re-col :value='12' :xs='24' :sm='24'>
				<el-form-item :label='titles?.allowAccountLogin' prop='allowAccountLogin'>
					<el-radio-group v-model="formInline.allowAccountLogin">
						<el-radio :value="1">是</el-radio>
						<el-radio :value="2">否</el-radio>
					</el-radio-group>
				</el-form-item>
			</re-col>
			<re-col :value='24' :xs='24' :sm='24'>
				<el-form-item :label='titles?.remark' prop='remark'>
					<el-input :maxlength="100" :show-word-limit="true" v-model='formInline.remark'
						:autosize="{ minRows: 4 }" type="textarea" clearable :placeholder='prompt?.remark' />
				</el-form-item>
			</re-col>
		</el-row>
	</el-form>
</template>

<script setup lang="ts">
import { ref, reactive } from "vue";
import ReCol from "@/components/ReCol";
import unitRoleSelect from '@/components/select/unitRoleSelect/unitRoleSelect.vue'
import unitParentSelect from '@/components/select/unitParentSelect/unitParentSelectTree.vue'
import type { FormRules } from "element-plus";
import { titles, prompt } from './index';
import type { infoType } from '@/api/manage/units-manager/units-manager/index';
import { UNIT_TYPE_LIST, PHONE_REG, PASSWORD_REG, ACCOUNT_REG } from '@/constant/index'
import { formValidateField } from '@/utils/functions'
type FormProps = {
	formInline: infoType,
	isLoading: boolean,
	superShow: boolean
}

const props = withDefaults(defineProps<FormProps>(), {
	formInline: () => ({} as infoType),
	isLoading: false,
	superShow: true
});

const formRules = reactive(<FormRules>{
	id: [{ required: true, message: prompt?.id, trigger: 'change' },],
	parentId: [{ required: true, message: prompt?.parentId, trigger: 'change' },
	{
		validator: (rule, value, callback) => {
			if (value && value == props.formInline.id) {
				callback(new Error('父级不能是自己'));
			} else {
				callback();
			}
		},
		trigger: "change"
	}],
	unityName: [{ required: true, message: prompt?.unityName, trigger: 'change' },],
	unityType: [{ required: true, message: prompt?.unityType, trigger: 'change' },],
	contactName: [{ required: true, message: prompt?.contactName, trigger: 'change' },],
	contactPhone: [
		{ required: true, message: prompt?.contactPhone, trigger: 'change' },
		{ pattern: PHONE_REG.role, message: PHONE_REG.text, trigger: 'change' },
	],
	// remark: [{ required: true, message: prompt?.remark, trigger: 'change' },],
	parentName: [{ required: true, message: prompt?.parentName, trigger: 'change' },],
	unityRole: [
		{ required: true, message: prompt?.unityRole, trigger: 'change' }
	],
	superUser: [
		{ required: true, message: prompt?.superUser, trigger: 'change' },
		{ pattern: ACCOUNT_REG.role, message: ACCOUNT_REG.text, trigger: 'change' },
	],
	superUserPassword: [
		{ required: true, message: prompt?.superUserPassword, trigger: 'change' },
		{ pattern: PASSWORD_REG.role, message: PASSWORD_REG.text, trigger: 'change' },
	],
	allowAccountLogin: [{ required: true, message: prompt?.allowAccountLogin, trigger: 'change' },],
});
const ruleFormRef = ref();
// const superShow = ref(true)
function changeFormRues() {
	// formRules.superUser = [{ required: false, message: prompt?.superUser, trigger: 'change' },]
	// formRules.superUserPassword = [
	// 	{ required: false, message: prompt?.superUserPassword, trigger: 'change' },
	// 	{ pattern: PASSWORD_REG.role, message: PASSWORD_REG.text, trigger: 'change' },
	// ]
	// superShow.value = false
}
function getRef() {
	return ruleFormRef.value;
}

defineExpose({ getRef, changeFormRues });
</script>
